<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>form表单</title>
    <meta name="keywords" content="404" />
    <meta name="description" content="404" />
    <meta name="Author" content="larry" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="Shortcut Icon" href="${base}/favicon.ico" />
    <!-- load css -->
    <link rel="stylesheet" type="text/css" href="${base}/larryms/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="${base}/larryms/css/admin/base.css" media="all">
    <link rel="stylesheet" type="text/css" href="${base}/larryms/css/animate.css" media="all">
    <link rel="stylesheet" type="text/css" href="${base}/larryms/css/admin/uidemo.css" media="all">
</head>

<body class="larryms-layout-bgA box-blank form-demo-box">
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<div class="layui-fluid margin15">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12">
            <section class="layui-card">
                <div class="layui-card-body">
                    <p class="library-tips" style="padding:15px 0px;">
                        数据表格table模块是ayui 最核心的组成之一，它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。详情可在layui官方文档中查看，下面对table模块的使用给出一些layui官方示例
                    </p>
                </div>
            </section>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12">
            <section class="layui-card">
                <div class="layui-card-header"><strong>数据表格使用演示一</strong></div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="test" lay-filter="test" data-url="${base}/larryms/data/admin/layuidemotable.json"></table>
                    <script type="text/html" id="toolbarDemo">
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                            <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
                        </div>
                    </script>
                    <script type="text/html" id="barDemo">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                </div>
            </section>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12">
            <section class="layui-card">
                <div class="layui-card-header"><strong>数据表格之单元格编辑</strong><em style="color: #ff5722;padding-left: 5px;">点击单元格内容可编辑</em></div>
                <div class="layui-card-body">
                    <table class="layui-table" lay-data="{url:'${base}/larryms/data/admin/layuidemotable2.json', id:'test3'}" lay-filter="test3">
                        <thead>
                        <tr>
                            <th lay-data="{type:'checkbox'}">ID</th>
                            <th lay-data="{field:'id', width:80, sort: true}">ID</th>
                            <th lay-data="{field:'username', width:120, sort: true, edit: 'text'}">用户名</th>
                            <th lay-data="{field:'email', edit: 'text', width: 180}">邮箱</th>
                            <th lay-data="{field:'sex', width:80, align:'center',edit: 'text'}">性别</th>
                            <th lay-data="{field:'city', edit: 'text', width: 100}">城市</th>
                            <th lay-data="{field:'sign', edit: 'text'}">签名</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </section>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12">
            <section class="layui-card">
                <div class="layui-card-header"><strong>数据表格之表单元素应用</strong></div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="test5" data-url="${base}/larryms/data/admin/layuidemotable.json"></table>
                    <script type="text/html" id="switchTpl">
                        <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="女|男" lay-filter="sexDemo" {{ d.id==10003 ? 'checked' : '' }}>
                    </script>
                    <script type="text/html" id="checkboxTpl">
                        <input type="checkbox" name="lock" value="{{d.id}}" title="锁定" lay-filter="lockDemo" {{ d.id==10006 ? 'checked' : '' }}>
                    </script>
                </div>
            </section>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12">
            <section class="layui-card">
                <div class="layui-card-header"><strong>数据表格之开启单选框</strong></div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="test6" lay-filter="test6" data-url="${base}/larryms/data/admin/layuidemotable3.json"></table>
                    <script type="text/html" id="toolbarDemo">
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                        </div>
                    </script>
                </div>
            </section>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12">
            <section class="layui-card">
                <div class="layui-card-header"><strong>数据表格之复杂表头（可以无限极）</strong></div>
                <div class="layui-card-body">
                    <table class="layui-table" lay-data="{url:'${base}/larryms/data/admin/layuidemotable4.json', cellMinWidth: 80, page: true}">
                        <thead>
                        <tr>
                            <th lay-data="{field:'username', width:80}" rowspan="3">联系人</th>
                            <th lay-data="{field:'amount', width:120}" rowspan="3">金额</th>
                            <th lay-data="{align:'center'}" colspan="5">地址1</th>
                            <th lay-data="{align:'center'}" colspan="2">地址2</th>
                            <th lay-data="{fixed: 'right', width: 160, align: 'center', toolbar: '#barDemo'}" rowspan="3">操作</th>
                        </tr>
                        <tr>
                            <th lay-data="{field:'province'}" rowspan="2">省</th>
                            <th lay-data="{field:'city'}" rowspan="2">市</th>
                            <th lay-data="{align:'center'}" colspan="3">详细</th>
                            <th lay-data="{field:'province'}" rowspan="2">省</th>
                            <th lay-data="{field:'city'}" rowspan="2">市</th>
                        </tr>
                        <tr>
                            <th lay-data="{field:'street'}" rowspan="2">街道</th>
                            <th lay-data="{field:'address'}">小区</th>
                            <th lay-data="{field:'house'}">单元</th>
                        </tr>
                        </thead>
                    </table>
                    <script type="text/html" id="barDemo">
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a>
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>
                    </script>
                </div>
            </section>
        </div>

        <div class="layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12">
            <section class="layui-card">
                <div class="layui-card-body" style="padding: 20px 15px;">
                    <blockquote class="layui-elem-quote larryms-doc-quote" style="font-size: 16px;">更多关于layui数据表格table模块可以参考layui官方示例 或 在LarryMS框架中关于table模块的开发者文档中查看丰富的扩展延伸示例与技巧</blockquote>
                </div>
            </section>
        </div>
    </div>
</div>
<!-- 加载js文件-->
<script type="text/javascript" src="${base}/larryms/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
        version: "2.0.8",
        base: '${base}/larryms/',
        page: 'layuidemo',
        identified: 'tables'
    }).extend({
        larry: 'js/base'
    }).use('larry');
</script>
</body>

</html>